<!doctype html>
<html>
    <head>
        <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0;" charset="utf-8">
        <title>Download Your License</title>

    <!--          _ _ _                                                         _ _ _
              _ /       \ _                                                 _ /       \ _
          _ /               \ _                                         _ /               \ _
       _/_ _ _ _ _ _ _ _ _ _ _ _\ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ /_ _ _ _ _ _ _ _ _ _ _ _\_
      |_ _ _ _ _ _ _ _ _ _ _ _ _ _| _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ |_ _ _ _ _ _ _ _ _ _ _ _ _ _|
      |                           |                                 |                           |
      |                           |       NICE TO MEET YOU :)       |                           |
      |             DESIGNED BY SONG JUN KAI, NEWS & NETWORK DEPARTMENT OF SISU SEF             |
      |                           |            _ _ _ _ _            |                           |
      |                           |           |    |    |           |                           |
      |                           |           |   ·|·   |           |                           |
      |_ _ _ _ _ _ _ _ _ _ _ _ _ _|_ _ _ _ _ _|_ _ | _ _|_ _ _ _ _ _|_ _ _ _ _ _ _ _ _ _ _ _ _ _|
    -->
    
        <style>

            @font-face{
                font-family:font1; 
                src:url("fonts/font1.ttf");
            }

            @font-face{
                font-family:font2; 
                src:url("fonts/font2.ttf");
            }

            body,html{
            margin:0px;
            background-color:#130b23;
            }

            iframe{
            border-width:0;
            }
                
        </style>
    </head>

    <body id="body" onload="convert()">
        <div id="container" style="margin:0 auto;position:absolute;margin-top:10%;z-index:97;border:solid 10px #ead887;">
            <div style="height:100%;width:100%;font-size:4em;font-family:font1;color:#ead887;text-align:center;position:absolute;top:50%;z-index:98;">
                正在生成
            </div>
            <img scr="" id="html2Image" style="height:100%;width:100%;position:absolute;z-index:99;">
	    </div>
        <div style="width:100%;font-size:2.5em;font-family:font1;color:#aaaaaa;position:absolute;bottom:17%;text-align:center;z-index:999">
            长按图片进行保存
        </div>
        <div style="width:100%;text-align:center;position:absolute;bottom:7%;z-index:999">
            <img src="/images/button4.png" width="30%" onclick="link()">
        </div>
        <div style="width:100%;height:100%;background-color:#130b23;position:absolute;z-index:9"></div>
        <div id="capture" style="width:70%;margin-left:15%;">
            <div style="position:relative;">
                <img src="images/VENUS-POSTER.jpg" width="100%" style="display:block;">
                <div id="name" height="10%" style="position:absolute;top:54.4%;left:27.6%;font-family:font1;font-size:1.95em;color:#ead887;"></div>
                <div id="number" height="10%" style="white-space:nowrap;position:absolute;top:68.3%;left:72.5%;font-family:font2;font-size:1.1em;color:#ead887;"></div>
            </div>
        </div>

        <script>
            var body = document.getElementById("body");
            var width = window.innerWidth;
            var height = window.innerHeight;
            console.log("height: " + height + ", width: " + width)
            body.style.height = height + "px";
            body.style.width = width + "px";
            document.getElementById("container").style.height = height*0.69 + "px"
            document.getElementById("container").style.width = height*0.46 + "px"
            document.getElementById("container").style.left = width/2-height*0.23-10 + "px"
        </script>

        <script>  
            var URL = document.URL; 
            var namenumber = URL.split('?name=')[1];
            var name = namenumber.split('&')[0];
            var number = namenumber.split('&number=')[1];
            name=decodeURI(name);
            document.getElementById("name").innerHTML="For " + name
            document.getElementById("number").innerHTML="NO. " + number
        </script>

        <script type="text/javascript" src="html2canvas.min.js"></script>

        <script type="text/javascript">
            function convert() {
                html2canvas(document.querySelector("#capture")).then(canvas => {
                var dataUrl = canvas.toDataURL();
                document.getElementById("html2Image").src = dataUrl;
            });
            }
        </script>

        <script>
            function link() {
            window.open("https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2ODA5NDMwNQ==&scene=124#wechat_redirect");
            }
        </script>

        <script>
            var _mtac = {"senseQuery":1};
            (function() {
            var mta = document.createElement("script");
            mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
            mta.setAttribute("name", "MTAH5");
            mta.setAttribute("sid", "500699551");

            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(mta, s);
            })();
        </script>

    </body>

</html>